<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 网页在浏览器上的图标 -->
    <link type="text/html" rel="icon" href="../../../image/logo.png">
    <!-- 引入layui的css -->
    <link type="text/css" rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <!-- 引入layui的js -->
    <script src="../../../lib/layui/layui.js"></script>
    <script src="../../../lib/jquery-3.7.1.js"></script>
    <style>
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            padding: 10px 20px;
            border-bottom: 1px solid #e5e5e5;
        }
        .layui-card-header {
            padding: 10px 0;
            height: auto;
            font-size: 13px;
        }
        .layui-input {
            height: 30px;
        }
    </style>

    <script>
        layui.use(function() {
            let laydate = layui.laydate;

            laydate.render({
                elem: '#openCardTime',
                type: 'datetime',
                range: true,
                shortcuts: [
                    {
                        text: "上个月",
                        value: function(){
                            let date = new Date();
                            let year = date.getFullYear();
                            let month = date.getMonth();
                            return [
                                new Date(year, month - 1, 1),
                                new Date(year, month, 0)
                            ];
                        }
                    },
                    {
                        text: "这个月",
                        value: function(){
                            let date = new Date();
                            let year = date.getFullYear();
                            let month = date.getMonth();
                            return [
                                new Date(year, month, 1),
                                new Date(year, month + 1, 0)
                            ];
                        }
                    },
                    {
                        text: "下个月",
                        value: function(){
                            let date = new Date();
                            let year = date.getFullYear();
                            let month = date.getMonth();
                            return [
                                new Date(year, month + 1, 1),
                                new Date(year, month + 2, 0)
                            ];
                        }
                    }
                ]
            });

            $('button#openMore').click(function() {
                // 把表单的第二行显示/隐藏
                if ($('#queryMore').is(':hidden')) {
                    $('#queryMore').show();
                    $(this).html('<i class="layui-icon layui-icon-subtraction"></i>收起')
                } else {
                    $('#queryMore').hide();
                    $(this).html('<i class="layui-icon layui-icon-addition"></i>展开')
                }
            });

            let table = layui.table;
            let tableId = 'studentTable';
            let dropdown = layui.dropdown;

            // 创建渲染实例
            let studentTable = table.render({
                elem: '#studentTable',
                url: '/json/student.json', // 此处为静态模拟数据，实际使用时需换成真实接口
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                //height: 'full-35', // 最大高度减去其他容器已占有的高度差
                css: [ // 重设当前表格样式
                    '.layui-table-tool-temp{padding-right: 145px;}'
                ].join(''),
                cellMinWidth: 80,
                totalRow: true, // 开启合计行
                page: true,
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {
                        field:'studentId', // json里面data对象的属性
                        fixed: 'left', // 固定到左边，滚动不受影响
                        width:80, // 宽度
                        title: '学号', // 网页上的表格列标题
                        sort: true, // 开启排序
                        totalRowText: '合计：' // 求和
                    },
                    {field:'studentName', width: 80, title: '姓名'},
                    {
                        field:'phone',
                        title:'手机号 <i class="layui-icon layui-icon-tips layui-font-14" lay-event="email-tips" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>',
                        fieldTitle: '手机号', // 用来导出，打印用的标题
                        hide: 0,
                        width: 150,
                        expandedMode: 'tips', // 多余内容扩展方式
                        edit: 'text'
                    },
                    {field:'sex', width: 80, title: '性别', sort: true},
                    {field:'cardNo', width: 150, title: '卡号'},
                    {field:'cardBalance', width: 100, title: '卡余额', sort: true, totalRow: '{{= d.TOTAL_NUMS }} 元'},
                    {field:'cardUseTimes', width: 100, title: '用卡次数', sort: true, totalRow: '{{= d.TOTAL_NUMS }} 次'},
                    {field:'cardOpenTime', title:'开卡时间', width: 120, sort: true},
                    {
                        field:'remark',
                        title: '备注',
                        edit: 'textarea',
                        minWidth: 260,
                        expandedWidth: 260,
                        totalRow: '人物：<span class="layui-badge-rim">唐代：{{= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{{= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{{= d.TOTAL_ROW.era.xian }}</span>'
                    },
                    {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
                ]],
                done: function(){
                    let id = this.id;
                    // 下拉按钮测试
                    dropdown.render({
                        elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                        data: [{
                            id: 'add',
                            title: '添加'
                        },{
                            id: 'update',
                            title: '编辑'
                        },{
                            id: 'delete',
                            title: '删除'
                        }],
                        // 菜单被点击的事件
                        click: function(obj){
                            let checkStatus = table.checkStatus(id)
                            let data = checkStatus.data; // 获取选中的数据
                            switch(obj.id){
                                case 'add':
                                    layer.open({
                                        type: 2, // iframe 内联框架层
                                        fixed: false, // 不固定
                                        area: '470px', // 高度由下面的 success 方法自适应
                                        shade: 0.6, // 遮罩透明度
                                        shadeClose: false, // 点击遮罩区域，不关闭弹层
                                        maxmin: true, // 允许全屏最小化
                                        anim: 0, // 0-6 的动画形式，-1 不开启
                                        title: '添加学生',
                                        content: ['studentAdd.html', 'no'], // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
                                        // btn: ['确认', '取消'],
                                        btnAlign: 'c', // 按钮水平居中对齐
                                        success: function(layero, index, that){
                                            layer.iframeAuto(index); // 让 iframe 高度自适应
                                            that.offset(); // 重新自适应弹层坐标
                                        },
                                        end: function() {
                                            if (layui.sessionData('studentAdd').isOk) {
                                                // 添加学生完成后，刷新表格
                                                table.reload(tableId, {
                                                    // 将查询表单值传入
                                                    where: form.val("studentQueryForm"),
                                                    // 由于是新增：重新从第 1 页开始
                                                    // studentTable.config: 获取当前表格基础属性配置项
                                                    page: {curr: 1}
                                                });
                                            }
                                        }
                                    });
                                    break;
                                case 'update':
                                    if(data.length !== 1) return layer.msg('请选择一行');
                                    layui.sessionData('studentList', {key: 'studentEditData', value: data[0]});
                                    layer.open({
                                        type: 2, // iframe 内联框架层
                                        fixed: false, // 不固定
                                        area: '470px', // 高度由下面的 success 方法自适应
                                        shade: 0.6, // 遮罩透明度
                                        shadeClose: false, // 点击遮罩区域，不关闭弹层
                                        maxmin: true, // 允许全屏最小化
                                        anim: 0, // 0-6 的动画形式，-1 不开启
                                        title: '编辑学生',
                                        content: ['studentEdit.html', 'no'], // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
                                        // btn: ['确认', '取消'],
                                        btnAlign: 'c', // 按钮水平居中对齐
                                        success: function (layero, index, that) {
                                            layer.iframeAuto(index); // 让 iframe 高度自适应
                                            that.offset(); // 重新自适应弹层坐标
                                        },
                                        end: function () {
                                            if (layui.sessionData('studentEdit').isOk) {
                                                // 添加学生完成后，刷新表格
                                                table.reload(tableId, {
                                                    // 将查询表单值传入
                                                    where: form.val("studentQueryForm"),
                                                    // 由于是编辑，从当前页开始
                                                    page: {curr: studentTable.config.page.curr}
                                                });
                                            }
                                        }
                                    });
                                    break;
                                case 'delete':
                                    if(data.length === 0){
                                        return layer.msg('请选择一行');
                                    }
                                    layer.alert(layui.util.escape(JSON.stringify(data)), {
                                        title: "删除行"
                                    });
                                    break;
                            }
                        }
                    });

                    // 行模式
                    dropdown.render({
                        elem: '#rowMode',
                        data: [{
                            id: 'default-row',
                            title: '单行模式（默认）'
                        },{
                            id: 'multi-row',
                            title: '多行模式'
                        }],
                        // 菜单被点击的事件
                        click: function(obj){
                            let checkStatus = table.checkStatus(id)
                            let data = checkStatus.data; // 获取选中的数据
                            switch(obj.id){
                                case 'default-row':
                                    table.reload('studentTable', {
                                        lineStyle: null // 恢复单行
                                    });
                                    layer.msg('已设为单行');
                                    break;
                                case 'multi-row':
                                    table.reload('studentTable', {
                                        // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                        lineStyle: 'height: 95px;'
                                    });
                                    layer.msg('即通过设置 lineStyle 参数可开启多行');
                                    break;
                            }
                        }
                    });
                },
                error: function(res, msg){
                    console.log(res, msg)
                }
            });

            // 工具栏事件
            table.on('toolbar(studentTable)', function(obj){
                let id = obj.config.id;
                let checkStatus = table.checkStatus(id);
                let othis = lay(this);
                switch(obj.event){
                    case 'getCheckData':
                        let data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        let getData = table.getData(id);
                        console.log(getData);
                        layer.alert(layui.util.escape(JSON.stringify(getData)));
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.alert('自定义工具栏图标按钮');
                        break;
                }
            });
            // 表头自定义元素工具事件 --- 2.8.8+
            table.on('colTool(studentTable)', function(obj){
                let event = obj.event;
                console.log(obj);
                if(event === 'email-tips'){
                    layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
                        title: '当前列属性配置项'
                    });
                }
            });

            // 触发单元格工具事件
            table.on('tool(studentTable)', function(obj){ // 双击 toolDouble
                let data = obj.data; // 获得当前行数据
                // console.log(obj)
                if(obj.event === 'edit'){
                    layui.sessionData('studentList', {key: 'studentEditData', value: data});
                    let studentEditOpen = layer.open({
                        type: 2, // iframe 内联框架层
                        fixed: false, // 不固定
                        area: '470px', // 高度由下面的 success 方法自适应
                        shade: 0.6, // 遮罩透明度
                        shadeClose: false, // 点击遮罩区域，不关闭弹层
                        maxmin: false, // 不允许全屏最小化，下面已经设置了弹框最大化，这里不需要允许全屏最小化
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        title: '编辑学生',
                        content: ['studentEdit.html', 'no'], // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
                        // btn: ['确认', '取消'],
                        btnAlign: 'c', // 按钮水平居中对齐
                        success: function(layero, index, that){
                            layer.iframeAuto(index); // 让 iframe 高度自适应
                            that.offset(); // 重新自适应弹层坐标
                        },
                        end: function() {
                            if (layui.sessionData('studentEdit').isOk) {
                                // 添加学生完成后，刷新表格
                                table.reload(tableId, {
                                    // 将查询表单值传入
                                    where: form.val("studentQueryForm"),
                                    // 由于是编辑，从当前页开始
                                    page: {curr: studentTable.config.page.curr}
                                });
                            }
                        }
                    });
                } else if(obj.event === 'more'){
                    // 更多 - 下拉菜单
                    dropdown.render({
                        elem: this, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [{
                            title: '查看',
                            id: 'detail'
                        },{
                            title: '删除',
                            id: 'del'
                        }],
                        click: function(menudata){
                            if(menudata.id === 'detail'){
                                layer.alert(layui.util.escape(JSON.stringify(data)), {
                                    title: "查看行"
                                });
                            } else if(menudata.id === 'del'){
                                layer.confirm('真的删除行 [学号: '+ data.studentId +'] 么', function(index){
                                    obj.del(); // 删除对应行（tr）的DOM结构
                                    layer.close(index);
                                    // 向服务端发送删除指令
                                    table.reload(tableId, {
                                        // 将查询表单值传入
                                        where: form.val("studentQueryForm"),
                                        // 由于是删除：重新从第 1 页开始
                                        // studentTable.config: 获取当前表格基础属性配置项
                                        page: {curr: 1}
                                    });
                                });
                            }
                        },
                        align: 'right', // 右对齐弹出
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                    })
                }
            });

            // 触发表格复选框选择
            table.on('checkbox(studentTable)', function(obj){
                console.log(obj)
            });

            // 触发表格单选框选择
            table.on('radio(studentTable)', function(obj){
                console.log(obj)
            });

            // 行单击事件
            table.on('row(studentTable)', function(obj){
                //console.log(obj);
                //layer.closeAll('tips');
            });
            // 行双击事件
            table.on('rowDouble(studentTable)', function(obj){
                console.log(obj);
            });

            // 单元格编辑事件
            table.on('edit(studentTable)', function(obj){
                let field = obj.field; // 得到字段
                let value = obj.value; // 得到修改后的值
                let data = obj.data; // 得到所在行所有键值
                // 值的校验
                if(field === 'phone'){
                    if(!/^1[3-9]\d{9}$/.test(obj.value)){
                        layer.tips('输入的手机号不正确，请重新编辑', this, {tips: 1});
                        return obj.reedit(); // 重新编辑 -- v2.8.0 新增
                    }
                }
                // 编辑后续操作，如提交更新请求，以完成真实的数据更新
                // …
                layer.msg('编辑成功', {icon: 1});

                // 其他更新操作
                let update = {};
                update[field] = value;
                obj.update(update);
            });
        });
    </script>
</head>
<body>
    <!-- 面包屑 -->
    <nav>
        <span class="layui-breadcrumb">
          <a href="">用户管理</a>
          <a><cite>学生管理</cite></a>
        </span>
        <button type="button" class="layui-btn" onclick="location.reload()">刷新页面</button>
    </nav>

    <!-- 先放表单，再放表格 -->
    <div style="padding: 10px">
        <div class="layui-card">
            <div class="layui-card-header">
                <form class="layui-form" action="">
                    <div class="layui-form-item" style="margin-bottom: 0">
                        <div class="layui-inline">
                            <label class="layui-form-label">学号</label>
                            <div class="layui-input-inline layui-input-wrap">
                                <input type="text" name="studentNo" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline layui-input-wrap">
                                <input type="text" name="name" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">卡号</label>
                            <div class="layui-input-inline layui-input-wrap">
                                <input type="text" name="cardNo" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">查询</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                <button type="button" class="layui-btn" id="openMore">
                                    <i class="layui-icon layui-icon-addition"></i>展开
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item" id="queryMore" style="display: none; margin-bottom: 0">
                        <div class="layui-inline">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <select name="sex" lay-filter="sex">
                                    <option value="" selected>请选择</option>
                                    <option value="0">男</option>
                                    <option value="1">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">开卡时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input"
                                       id="openCardTime"
                                       placeholder="2023-01-01 - 2023-12-31">
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="layui-card-body">
                <div style="padding: 16px;">
                    <table class="layui-hide" id="studentTable" lay-filter="studentTable"></table>
                </div>
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                        <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
                        <button class="layui-btn layui-btn-sm" id="dropdownButton">
                            下拉按钮
                            <i class="layui-icon layui-icon-down layui-font-12"></i>
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
                            <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
                            <i class="layui-icon layui-icon-down layui-font-12"></i>
                        </button>
                    </div>
                </script>
                <script type="text/html" id="barDemo">
                    <div class="layui-clear-space">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-xs" lay-event="more">
                            更多
                            <i class="layui-icon layui-icon-down"></i>
                        </a>
                    </div>
                </script>
            </div>
        </div>
    </div>

</body>
</html>